<template>
    <div class="main">
        <!-- 居中对齐 -->
        <div class="content">
            <!-- 左 -->
            <div class="logo">
                <Logo></Logo>
            </div>
            <!-- 中 -->
            <div class="search-box">
                <div class="input-search">
                    <SearchBox></SearchBox>
                </div>
                <div class="shopcart">
                    <ShopCart></ShopCart>
                </div>
            </div>
            <!-- 右 -->
            <div class="right">
                <img src="@/assets/images/header-right.png">
            </div>
        </div>
    </div>
</template>

<script setup>
    import Logo from '@/components/common/Logo.vue'
    import SearchBox from '@/components/home/SearchBox'
    import ShopCart from '@/components/home/ShopCart.vue'
</script>

<style lang="less" scoped>
    .main{
        .content {
            // border: 1px solid;
            width: var(--content-width);
            margin: 0 auto;
            height: 140px;
            display: flex;
        }
        .search-box {
            width: 800px;
            display: flex;
            // height: 70px;
        }
        .right {
            text-align: right;
            flex: 1;
            img {
                width: 200px;
            }
            line-height: 140px;
        }
    }
</style>